<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app" v-cloak>
			<ul>
				<li v-for="item,index in users">{{item}}</li>
			</ul>
			<ul>
				<li v-for="item in users">{{item}}</li>
			</ul>
			<ul>
				<li v-for="(a,key,index) in users">{{key}}-{{a}}-{{index}}</li>
			</ul>
		</div>
		<script>
			/*
				v-for循环
					语法：v-for="item,index in 数组"
					语法：v-for="value,key,index in 对象"

				根据数据生成重复的结构，就在元素行间写上这个指令

				Object.keys() 使用v-for的时候循环对象，拿到的下标是按照Object.keys()的顺序来的
			*/
			let obj = {
				name: 'leo',
				age: 30
			}

			let vm = new Vue({
				el: '#app',
				data: { 
					users: obj
				}
			});



		</script>
	</body>
</html>